<template>
  <div class="focus-brand-buttom">
    <a href="javascript:;" class="btn disabled">上一页</a>
    <a href="javascript:;" class="btn active">1</a>
    <a href="javascript:;" class="btn">2</a>
    <a href="javascript:;" class="btn">3</a>
    <a href="javascript:;" class="btn">4</a>
    <a href="javascript:;" class="btn">5</a>
    <a href="javascript:;" class="dot">...</a>
    <a href="javascript:;" class="btn">下一页</a>
  </div>
</template>

<script setup lang='ts'>
</script>
<style scoped lang='less'>
.focus-brand-buttom {
  width: 100%;
  height: 40px;
  // background-color: khaki;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding-bottom: 20px;



  .btn {
    display: inline-block;
    padding: 5px 10px;
    margin: 4px;
    background-color: #f4f5f4;
    border-radius: 3px;
    color: #666;

    border: 1px solid #ccc;
  }

  .active {
    background-color: #27bb9a;
    color: #fff;
  }



}
</style>